<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <style>
      table th,
      table td {
        vertical-align: middle !important;
        text-align: center;
      }
    </style>
  </head>

  <body style="padding: 15px">
    <!-- 添加图书的Panel面板 -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <div class="panel-body form-inline">
        <form>
          <div class="input-group">
            <div class="input-group-addon">书名</div>
            <input
              type="text"
              class="form-control"
              id="iptBookname"
              placeholder="请输入书名"
              name="bookname"
            />
          </div>
          <div class="input-group">
            <div class="input-group-addon">作者</div>
            <input
              type="text"
              class="form-control"
              id="iptAuthor"
              placeholder="请输入作者"
              name="author"
            />
          </div>
          <div class="input-group">
            <div class="input-group-addon">出版社</div>
            <input
              type="text"
              class="form-control"
              id="iptPublisher"
              name="publisher"
              placeholder="请输入出版社"
            />
          </div>
        </form>
        <button id="btnAdd" class="btn btn-primary">添加</button>
      </div>
    </div>
    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb">
        <!-- <tr>
                <td>1</td>
                <td>西游记</td>
                <td>吴承恩</td>
                <td>北京图书出版社</td>
                <td><a href="javascript:;" class="btn btn-danger delete">删 除</a></td>
            </tr> -->
      </tbody>
    </table>
    <script src="./lib/jquery.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
